<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画--拉伸</title>
		<style type="text/css">
			.transtionBox{
				border: 1px solid;
				width: 200px;
				height: 300px;
				/* background-color: #00BFFF; */
				transition: width 2s;/*当触发hover对应的拉升方向时拉伸时间由立即完成改为两秒完成 */
			}
			.transtionBox:hover{
				width: 300px;/*当鼠标移入时，宽度在立即拉伸为300px ，鼠标移出时立即恢复至原长度*/
			}
		</style>
	</head>
	<body>
		<h3>拉伸盒子</h3>
		<h5>transtion    两个参数： 拉伸方向，拉伸时间</h5>
		<div id="" class="transtionBox">
			
		</div>
	</body>
</html>
